<template>
    <div class="container" @click="handleGalleryClick">
        <div class="wrapper">
            <!-- <img class="wrapper-img" src="https://i.loli.net/2020/11/18/YjlruH7Ea3k2gTA.jpg"/> -->
            <swiper :options="swiperOptions">
                <swiper-slide 
                v-for="(item,index) of imgs"
                :key="index"
                >
                    <img class="gallery-img" :src="item" />
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
export default {
    name: "Gallery",
    data () {
        return {
            swiperOptions: {
                pagination: ".swiper-pagination",
                paginationType: "fraction",
                observer: true,
                observeParents: true
            },
        }
    },
    props: {
        imgs: Array
    },
    methods: {
        handleGalleryClick () {
            this.$emit('close')
        }
    }

}
</script>

<style lang="stylus" scoped>
    .container >>> .swiper-container
        overflow: inherit
    .container
        z-index: 99
        position: fixed
        top: 0
        bottom: 0
        left: 0
        right: 0
        display: flex
        flex-direction: column
        justify-content: center
        background: #000
        .wrapper
            padding-bottom: 100%
            height: 0  
            width: 100%
            .gallery-img
                width: 100%
            .swiper-pagination
                bottom: -1rem
                color: #fff
</style>